import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import FontFamilys from '../../../utils/FontFamilys';
import NavCon from '../../Public/NavCon';
import PersonalInfo from './PersonalInfo';

class PriceConfigBill extends Component {

  _goBack() {
    this.props.navigator.pop();
  }

  render() {
    const { bill, user } = this.props;
    console.log('bill===', bill);
    return (
      <View style={[styles.flex, styles.bgColor, styles.viewTitle]}>
        <NavCon
          bgColor="#fff"
          currentTitle="意向价格表单"
          onPress={() => this._goBack()}
        />
        <ScrollView>
          <PersonalInfo
            user={user}
            bill={bill}
          />
          <View style={[styles.looks]}>
            <View style={styles.titleView}>
              <Text style={styles.sectionTitle}>偏好信息</Text>
            </View>

            <View style={[styles.row, styles.smallView]}>
              <Text style={styles.sectionSubTitle}>车身颜色</Text>
              {
                bill.carcolor
                ?
                  <Text style={styles.itemContent}>— —{bill.carcolor}— —</Text>
                :
                null
              }
            </View>

            <View style={[styles.row, styles.wrrap]}>

              {
              bill.color ?
                bill.color.map(color => (
                  <View key={color.ename}>
                    <View
                      style={[styles.row, styles.triangle]}
                    >
                      <View
                        style={[styles.triangleTopleft, { borderTopColor: color.color_value }]}
                      />
                      <View
                        style={[styles.triangleBottomright,
                          { borderBottomColor: color.color_value }]}
                      />
                    </View>

                    {
                    bill.carcolor === color.name
                    ?
                      <View style={[styles.redLine, styles.carLine]} />
                    :
                    null
                   }
                  </View>
                ))
                :
                null
            }
            </View>
            <View style={styles.line} />

            {
              bill.wheelhub
              ?
                <View>
                  <View style={[styles.row, styles.smallView]}>
                    <Text style={styles.sectionSubTitle}>轮毂选配</Text>
                    <Text style={styles.itemContent}>— —{bill.wheelhub}寸轮毂— —</Text>
                  </View>
                  <View style={[styles.row, styles.hobbyV]}>
                    <Image style={styles.lunguImg} source={require('../../../img/home/d18.jpg')} />
                    <Image style={[styles.lungu19, styles.lunguImg]} source={require('../../../img/home/d19.jpg')} />
                  </View>
                  <View style={[styles.redLine, styles.lunguLine]} />
                  <View style={styles.line} />
                </View>
              :
              null
            }

            {
              bill.glass
              ?
                <View>
                  <View style={[styles.row, styles.smallView]}>
                    <Text style={styles.sectionSubTitle}>玻璃选配</Text>
                    <Text style={styles.itemContent}>— —{bill.glass}— —</Text>
                  </View>
                  <View style={[styles.row, styles.hobbyV]}>
                    <Image style={styles.lunguImg} source={require('../../../img/online/oGlass.jpg')} />
                    <Image style={[styles.lungu19, styles.lunguImg]} source={require('../../../img/online/oNoGlass.jpg')} />
                  </View>
                  <View style={[styles.redLine, styles.lunguLine]} />
                  <View style={styles.line} />
                </View>
              :
               null
            }

          </View>
          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-price.png')} />
              <Text style={styles.itemTitle}>裸车价格</Text>
            </View>
            <Text style={[styles.itemContent]}>{bill.price}</Text>
          </View>
          <View style={styles.line} />

          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-discount.png')} />
              <Text style={styles.itemTitle}>其他优惠</Text>
            </View>
            <Text style={[styles.itemContent]}>{bill.gift}</Text>
          </View>
          <View style={styles.line} />


        </ScrollView>
      </View>);
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#fff',
    paddingBottom: PxToDp(20),
  },
  looks: {
    width: '100%',
    backgroundColor: '#fff',
    paddingTop: PxToDp(15),
    marginBottom: PxToDp(12),
  },
  itemTitle: {
    fontSize: PxToDp(14),
    color: '#666',
    marginLeft: PxToDp(9),
    fontFamily: FontFamilys(),
  },
  wrrap: {
    flexWrap: 'wrap',
  },
  viewTitle: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  sectionTitle: {
    color: '#000000',
    fontSize: PxToDp(15),
  },
  titleView: {
    height: PxToDp(38),
    justifyContent: 'center',
    backgroundColor: '#f8f8f9',
    paddingLeft: PxToDp(20),
  },
  triangleTopleft: {
    width: 0,
    height: 0,
    borderTopWidth: PxToDp(28),
    borderStyle: 'solid',
    borderRightWidth: PxToDp(28),
    borderRightColor: 'transparent',
    opacity: 0.7,
  },
  triangleBottomright: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderBottomWidth: PxToDp(28),
    borderLeftColor: 'transparent',
    borderLeftWidth: PxToDp(28),
    marginLeft: PxToDp(-28),
  },
  triangle: {
    marginLeft: PxToDp(20),
    marginTop: PxToDp(30),
  },
  smallView: {
    justifyContent: 'space-between',
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    paddingTop: PxToDp(21),
  },
  itemContent: {
    fontSize: PxToDp(13),
    color: '#999',
  },
  line: {
    width: '100%',
    height: PxToDp(0.5),
    backgroundColor: '#e8e8e8',
  },
  redLine: {
    width: PxToDp(28),
    height: PxToDp(3),
    backgroundColor: '#ff5841',
    marginTop: PxToDp(16),
  },
  carLine: {
    marginLeft: PxToDp(20),
  },
  conViewItem: {
    justifyContent: 'space-between',
    paddingTop: PxToDp(22),
    paddingLeft: PxToDp(22),
    paddingRight: PxToDp(19),
    height: PxToDp(47),
  },
  lungu19: {
    marginLeft: PxToDp(20),
  },
  lunguImg: {
    height: PxToDp(38),
    width: PxToDp(60),
    marginTop: PxToDp(18),
  },
  sectionSubTitle: {
    color: '#121212',
    fontSize: PxToDp(13),
    fontFamily: FontFamilys(),
  },
  hobbyV: {
    paddingLeft: PxToDp(20),
  },
  lunguLine: {
    marginLeft: PxToDp(32),
  },
});

export default PriceConfigBill;
